<template>
  <mt-navbar title="提现详情"> </mt-navbar>
  <view v-if="detailInfo" class="bg-#ffffff px-32rpx pt-32rpx" style="min-height: 100vh">
    <view class="text-center mb-24rpx">
      <image
        v-if="detailInfo.withdrawWay === 1"
        class="w-94rpx h-94rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-weixin.svg"
      ></image>
      <image
        v-if="detailInfo.withdrawWay === 2"
        class="w-94rpx h-94rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-alipay.svg"
      ></image>
    </view>
    <view class="text-center mb-24rpx"> {{ detailInfo.withdrawAccountName }}({{ detailInfo.withdrawAccount.slice(0, 4) }}) </view>
    <view class="text-center mb-24rpx text-#1C213E text-62rpx font-bold"> {{ amountTransfer(detailInfo.withdrawAmount, 2) }} </view>
    <view v-if="detailInfo.approveStatus === 1" class="flex justify-center">
      <uv-icon name="clock" color="#1C213E" size="32rpx"></uv-icon>
      <text class="text-#1C213E text-32rpx ml-8rpx">审核中</text>
    </view>
    <view v-if="detailInfo.approveStatus === 2 && detailInfo.withdrawStatus === 2" class="flex justify-center">
      <uv-icon name="checkmark-circle-fill" color="#28B094" size="32rpx"></uv-icon>
      <text class="text-#1C213E text-32rpx ml-8rpx">提现成功</text>
    </view>
    <view v-if="detailInfo.approveStatus === 2 && detailInfo.withdrawStatus === 3" class="flex justify-center">
      <uv-icon name="close-circle-fill" color="#F94B4A" size="32rpx"></uv-icon>
      <text class="text-#1C213E text-32rpx ml-8rpx">提现失败</text>
    </view>
    <view v-if="detailInfo.approveStatus === 3" class="flex justify-center">
      <uv-icon name="close-circle-fill" color="#F94B4A" size="32rpx"></uv-icon>
      <text class="text-#1C213E text-32rpx ml-8rpx">审批驳回</text>
    </view>
    <view class="h-46rpx mb-38rpx" style="border-bottom: 2rpx solid #e6e6e6"></view>
    <view class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">提现金额</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">￥{{ amountTransfer(detailInfo.withdrawAmount, 2) }}</view>
    </view>
    <view class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">服务费</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">￥{{ amountTransfer(detailInfo.withdrawFee, 2) }}</view>
    </view>
    <view class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">申请时间</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">{{ detailInfo.createTime }}</view>
    </view>
    <view v-if="detailInfo.approveStatus === 2 && detailInfo.withdrawStatus === 2" class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">到账时间</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">{{ detailInfo.withdrawSucTime }}</view>
    </view>
    <view v-if="detailInfo.approveStatus === 2 && detailInfo.withdrawStatus === 3" class="flex items-start mb-24rpx">
      <view class="w-230rpx text-28rpx text-#727687">失败原因</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">{{ detailInfo.withdrawFailContent }}</view>
    </view>
    <view v-if="detailInfo.approveStatus === 3" class="flex items-start mb-24rpx">
      <view class="w-230rpx text-28rpx text-#727687">驳回原因</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">{{ detailInfo.approveReason }}</view>
    </view>
    <view class="flex items-start mb-24rpx">
      <view class="w-230rpx text-28rpx text-#727687">账户类型</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">
        <text v-if="detailInfo.withdrawWay === 1">微信</text>
        <text v-if="detailInfo.withdrawWay === 2">支付宝</text>
        <text v-if="detailInfo.withdrawWay === 3">银行卡</text>
      </view>
    </view>
    <view class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">账户</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all"
        >{{ detailInfo.withdrawAccountName }} - {{ replaceMiddleWithAsterisks(detailInfo.withdrawAccount) }}</view
      >
    </view>
    <view class="flex items-start mb-24rpx line-height-28rpx">
      <view class="w-230rpx text-28rpx text-#727687">提现单号</view>
      <view class="flex-1 min-w-0 text-28rpx text-#000000 break-all">{{ detailInfo.withdrawNo }}</view>
    </view>
    <view class="h-22rpx mb-38rpx" style="border-bottom: 2rpx solid #e6e6e6"></view>
    <view class="step flex items-start">
      <view class="w-230rpx text-28rpx text-#727687">提现进度</view>
      <view class="flex-1 min-w-0">
        <uv-steps current="0" direction="column">
          <uv-steps-item v-for="(item, index) in stepArr" :key="index">
            <template #icon>
              <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-step.svg"></image>
            </template>
            <template #title>
              <text class="text-28rpx text-#1C213E mb-10rpx">{{ item.title }}</text>
            </template>
            <template #desc>
              <text class="text-28rpx text-#727687">{{ item.time }}</text>
            </template>
          </uv-steps-item>
        </uv-steps>
      </view>
    </view>
  </view>
</template>

<script setup>
import { withdrawalRecordgetWithdrawalRecordDetail } from '@/subCommission/api/index';
import { amountTransfer, replaceMiddleWithAsterisks } from '@/utils/tools';

const detailInfo = ref(null);
const stepArr = ref([]);
function getDetail() {
  withdrawalRecordgetWithdrawalRecordDetail({ id: id.value }).then((res) => {
    const obj = res.data;
    if (obj.approveStatus === 1) {
      stepArr.value = [
        {
          title: '发起提现',
          time: obj.createTime
        },
        {
          title: '财务审核中',
          time: '预计1-3个工作日内审核完毕'
        }
      ];
    } else if (obj.approveStatus === 2) {
      if (obj.withdrawStatus === 2) {
        stepArr.value = [
          {
            title: '发起提现',
            time: obj.createTime
          },
          {
            title: '财务审核中',
            time: '预计1-3个工作日内审核完毕'
          },
          {
            title: '到账',
            time: obj.withdrawSucTime
          }
        ];
      } else if (obj.withdrawStatus === 3) {
        stepArr.value = [
          {
            title: '发起提现',
            time: obj.createTime
          },
          {
            title: '财务审核中',
            time: '预计1-3个工作日内审核完毕'
          },
          {
            title: '提现失败',
            time: ''
          }
        ];
      }
    } else if (obj.approveStatus === 3) {
      stepArr.value = [
        {
          title: '发起提现',
          time: obj.createTime
        },
        {
          title: '财务审核中',
          time: '预计1-3个工作日内审核完毕'
        },
        {
          title: '审核失败',
          time: obj.approveTime
        }
      ];
    }
    detailInfo.value = obj;
  });
}

const id = ref('');
onLoad((options) => {
  id.value = options.id;
  getDetail();
});
</script>

<style lang="scss" scoped>
.step {
  :deep(.uv-steps-item__line) {
    border-right: 1px dashed #e6e6e6;
    background-color: transparent !important;
  }
}
</style>
